// 使用类组件 
import React, { Component } from 'react';

// let flag = true; //注：全局的变量在组件内不能操作，也不能被监听

export class Alert extends Component {
    constructor(props) {
        super(props)  //合并react组件提供的this，props在此代替this
        this.state = { //通过this.state = {} 定义当前组件的状态
            flag: false,
            arr: [1, 2, 3]
        }
    }
    render() {
        // 在render函数使用时结构出来
        const { flag } = this.state;
        return (
            <div>
                {/* 通过onClick绑定点击事件，事件名以【驼峰】命名;
                事件函数建议使用【箭头函数】,如果使用的是【普通函数】，需要【bind】修改this指向 ;
                依旧可以接收到事件对象event*/}
                <button onClick={function (e) {
                    this.setState({  //在react中修改状态只能通过【this.setState({})】
                        // 参数1：是一个对象，里面写要修改的内容
                        // 参数2：一个函数，是数据渲染完毕之后的回调函数
                        flag: true,
                    })
                }.bind(this)}>打开弹窗</button>

                {/* 使用三元运算符进行判断，为真则渲染，为假，则为null */}

                {
                    flag ? <div className='mask'>
                        <div className='alert'>
                            <span onClick={() => {
                                this.setState({
                                    flag: false
                                })
                            }}>X</span>
                            我是弹窗内容
                        </div>
                    </div> : null
                }

            </div>
        )
    }
}

export default Alert